<template>
    <div style="width:100%;height:100%;overflow:hidden">
        <div style="display:flex">
            <div style="flex:1">
                <weui-search-bar :list="[]" placeholder="搜索优惠券" @on-search="on_search_bar_0_search"
                                 @on-input="on_search_bar_0_input">
                </weui-search-bar>
            </div>
            <div>
                <weui-button type="primary" :is_plain="true" :font_size="17" @on-click="on_search_bar_0_search">
                    <i style="font-family:iconfont;font-style:normal;">&#xe606;</i>
                </weui-button>
            </div>
        </div>
        <div v-show="is_loading" style="text-align:center">
            <weui-icon type="loading">
            </weui-icon>
        </div>
        <weui-panel title="" :list="panel_0_list" style="overflow-y:auto" class="hidden-sm-and-up"
                    :style="{maxHeight: 'calc(100% - ' + (is_loading ? 65 : 45) + 'px)'}"
                    v-if="is_mobile"
                    @on-click="on_panel_0_click">
        </weui-panel>
        <div style="overflow-y:auto;padding:0 5px;"
             :style="{maxHeight: 'calc(100% - ' + (is_loading ? 65 : 45) + 'px)'}"
             v-else>
            <el-row :gutter="10" class="hidden-xs-only" v-for="i in Math.ceil(panel_0_list.length / 4)" :key="i">
                <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6"
                        v-for="(item, j) in panel_0_list.slice(i * 4 - 4, i * 4)"
                        :key="item.link">
                    <el-card :body-style="{ padding: '0px' }" @click="on_panel_0_click(i * 4 - 4 + j)">
                        <div @click="on_panel_0_click(i * 4 - 4 + j)">
                            <img v-lazy="item.img" style="width:100%">
                            <div style="padding: 14px;">
                                <div>{{item.title}}</div>
                                <div v-html="item.desc" style="font-size:14px;color:#333333"></div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <div v-if="hasFoot">
                关于我们:
                营业执照:
                联系我们
                旅悠版权所有 2014-2018
                问题反馈
            </div>
        </div>
        <weui-dialog :is_show="code_dialog_is_show" title="请输入验证码" :list="['提交']"
                     @on-click="on_code_dialog_click">
            <weui-input :list="code_dialog_input_list" title="" :show_more="false" :tips="null"
                        agreement_name="" more_label=""></weui-input>
        </weui-dialog>
    </div>
</template>

<script>
    import WeuiSearchBar from '../vue2componentSet/src/components/WeuiSearchBar'
    import WeuiPanel from '../vue2componentSet/src/components/WeuiPanel'
    import WeuiButton from '../vue2componentSet/src/components/WeuiButton'
    import WeuiDialog from '../vue2componentSet/src/components/WeuiDialog'
    import WeuiInput from '../vue2componentSet/src/components/WeuiInput'
    import WeuiIcon from '../components/WeuiIcon'
    import global from '../lib/global'
    import browserDetect from '../lib/browserDetect'
    import axios from 'axios'

    export default {
        components: {
            WeuiSearchBar,
            WeuiPanel,
            WeuiButton,
            WeuiDialog,
            WeuiInput,
            WeuiIcon
        },
        data() {
            return {
                itemList: [],
                search_text: '',
                last_search_text: '',
                need_get_code: 0,
                code_dialog_is_show: false,
                code: '',
                codeRequestId: 0,
                is_loading: 0,
                search_id: 0,
                is_mobile: browserDetect().mobile,
                hasFoot: location.hostname.endsWith('etourly.com') && !location.hostname.endsWith('coupon.etourly.com')
            }
        },
        mounted() {
            this.$store.commit('set_title', '优惠券')

            this.search()
        },
        methods: {
            search() {
                if (this.itemList.length > 0) {
                    return
                }
                this.is_loading++
                var search_id = this.search_id
                axios.post(global.server + 'getTaobaoCoupon.do', {
                    q: this.search_text.trim()
                }).then(result => {
                    if (search_id != this.search_id) {
                        return
                    }
                    const obj = result.data
                    if (obj.result == -1) {
                        this.itemList.push({
                            title: '抱歉，没有找到相关优惠券'
                        })
                    } else {
                        if (obj.list.length == 0) {
                            this.itemList.push({
                                title: '抱歉，没有找到相关优惠券'
                            })
                        } else {
                            obj.list.forEach(item => {
                                this.itemList.push(item)
                            })
                        }
                    }
                    this.is_loading--
                }, result => {
                    if (search_id != this.search_id) {
                        return
                    }
                    console.log(result)
                    this.itemList.push({
                        title: '抱歉，没有找到相关优惠券'
                    })
                    this.is_loading--
                })
            },
            on_panel_0_click(index) {
                if (!this.panel_0_list[index].advLink) {
                    return
                }
                if (this.panel_0_list[index].advLink.indexOf('taobao') != -1 || this.panel_0_list[index].advLink.indexOf('tmall') != -1) {
                    if (browserDetect().wechat) {
                        this.$store.commit('toast', {
                            type: 'warn',
                            content: '请用系统浏览器打开'
                        })
                        return
                    }
                }
                // if (!this.$store.state.customer) {
                //     this.$store.commit('login_dialog', {
                //         is_show: true,
                //         resolve: () => {
                //             this.on_panel_0_click(index)
                //         }
                //     })
                //     return
                // }
                if (browserDetect().Safari || browserDetect().FireFox) {
                    location.href = this.panel_0_list[index].advLink
                } else {
                    const node = document.getElementById('open-url')
                    node.href = this.panel_0_list[index].advLink
                    node.click()
                }
            },
            on_search_bar_0_input(value) {
                this.search_text = value
            },
            get_code() {
                if (this.need_get_code <= 0) {
                    this.code_dialog_is_show = false
                    return
                }
                axios.post(global.server + 'getFanliCode.do', {}).then(result => {
                    const obj = result.data
                    if (obj.code) {
                        if (obj.codeRequestId != this.codeRequestId) {
                            if (this.need_get_code > 0) {
                                this.code_dialog_is_show = true
                                this.code = 'data:image/png;base64,' + obj.code
                                this.codeRequestId = obj.codeRequestId
                            }
                        }
                    } else {
                        this.code_dialog_is_show = false
                    }
                    setTimeout(() => {
                        this.get_code()
                    }, 1000)
                }, result => {
                    console.log(result)
                    this.code_dialog_is_show = false
                })
            },
            on_search_bar_0_search() {
                if (this.last_search_text != this.search_text) {
                    this.last_search_text = this.search_text
                    this.itemList.splice(0, this.itemList.length)
                }
                this.search_id++
                this.search()
            },
            on_code_dialog_click(index) {
                if (index == 0) {
                    axios.post(global.server + 'submitFanliCode.do', {
                        codeRequestId: this.codeRequestId,
                        codeText: this.code_dialog_input_list[0].value
                    }).then(result => {
                    }, result => {
                    })
                }
            },
        },
        computed: {
            panel_0_list() {
                var list = []
                var i = 0
                while (true) {
                    var hasMore = false
                    if (this.itemList.length <= i || !this.itemList[i].link) {
                        break
                    }
                    var item = this.itemList[i]
                    var img = item.img
                    if (browserDetect().Safari && img.endsWith('_.webp')) {
                        img = img.substring(0, img.length - 6)
                    }
                    var desc = ''
                    item.info && (desc += item.info)
                    var infos = []
                    item.count && infos.push('数量: ' + item.count)
                    item.shopName && infos.push('店名: ' + item.shopName)
                    list.push({
                        img: img,
                        title: item.title,
                        desc: desc,
                        infos: infos,
                        advLink: item.link
                    })
                    i++
                }
                return list
            },
            code_dialog_input_list() {
                return [{
                    value: '',
                    img: this.code
                }]
            }
        }
    }
</script>
